<template>
  <div>
    <Header title="登录"></Header>
    <div class="image">
      <div>买团</div>
    </div>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="userinfo.username"
          name="name"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="userinfo.password"
          type="password"
          name="pass"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          登录
        </van-button>
        <van-button round block type="primary" @click="onRegister">
          去注册
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import Header from "@/components/Header.vue";
import { useRouter } from "vue-router";
import { ref, toRefs } from "vue";
import { showToast } from "vant";
const router = useRouter();
const onSubmit = (value) => {
  if (!localStorage.userinfo) {
    showToast("用户未注册");
    return;
  } else {
    let userinfo = JSON.parse(localStorage.getItem("userinfo"));
    if (value["name"] === userinfo["name"]) {
      if (value["pass"] === userinfo["pass"]) {
        showToast("登录成功");
        localStorage.setItem("token", "token");
        router.push("/home");
      } else {
        showToast("密码错误");
      }
    } else {
      showToast("账号不存在");
    }
  }
};
const onRegister = () => {
  router.push("/register");
};
let userinfo = ref({ username: "", password: "" });
</script>

<style lang="less" scoped>
.image {
  padding: 20px 0;
  div {
    margin: auto;
    background: #ffc400;
    width: 188px;
    height: 188px;
    border-radius: 30px;
    font-size: 80px;
    text-align: center;
    line-height: 188px;
  }
}
.van-button--primary {
  background: #ffc400;
  border: 1px solid #ffc400;
  margin-bottom: 15px;
}
</style>
